<template>
  <div>
    <!-- 题型标题 -->
    <h1>二、填空题</h1>
    <!-- 题目描述区域 -->
    <p style="font-size: 0.45rem;line-height: 200%;">
      <span style="font-size: 0.6rem;font-weight: bold;">{{ questionParam.qidx + 1 }}.</span>
      {{ questionData.title }}
    </p>
    <!-- 填空区域 -->
    <div style="line-height: 200%;font-size: 0.45rem;margin-top: 0.5rem;">
      <van-form :readonly="!editable">
        <van-field
          v-for="(val,idx) in blankData"
          :key="idx"
          v-model="blankData[idx]"
          :label="`第${idx+1} 空`"
          placeholder="请输入答案..."
        />
      </van-form>
    </div>
  </div>
</template>

<script>
import { Field, Form } from 'vant'

export default {
  name: 'FillQuestion',
  components: {
    [Field.name]: Field,
    [Form.name]: Form
  },
  props: {
    questionData: {
      type: Object, require: true, default: () => { return {} }
    },
    submitData: {
      type: Object, require: true, default: () => { return {} }
    },
    questionParam: {
      type: Object, require: true, default: () => { return {} }
    },
    editable: {
      type: Boolean, require: false, default: false
    }
  },
  data () {
    return {
      blankData: ['aa', 'bb']
    }
  },
  computed: {

  },
  created () {
    setTimeout(() => {
      // 初始化填空表单数据
      const data = []
      for (let i = 0; i < this.submitData.blankAnswers.length; i++) {
        data.push(this.submitData.blankAnswers[i])
      }
      this.blankData = data
      // 绑定更新数据
      this.submitData.blankAnswers = data
    }, 0)
  },
  methods: {

  }
}
</script>

<style scoped>
</style>
